<template>
    <div>
        <!-- 内容区域 -->
        <div class="content">
            <!-- 商品块 -->
            <router-link :to="'/home/goodsInfo/'+ item.id" class="item" v-for="(item, index) in goodsList" :key="index">
                <img :src="item.img_url" tag="div">
                <p>{{item.title}}}</p>
                <div class="info">
                    <p class="price">
                        <span class="now">￥{{item.sell_price}}</span>
                        <span class="old">￥{{item.market_price}}</span>
                    </p>
                    <p class="cell">
                        <span>热卖中</span>
                        <span>剩余{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </router-link>
            <input type="button" value="加载更多" @click="getMore" class="getMore">
            
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            pageindex:1,
            goodsList: [],
        }
    },
    created(){
        this.getGoodsList()
    },
    methods: {
        getGoodsList(){
            this.$http.get('api/getgoods?pageindex='+this.pageindex+'').then(result => {
                if (result.body.status == 0) {
                    
                    this.goodsList = this.goodsList.concat(result.body.message)
                }
            })
        },
        getMore(){
            this.pageindex ++ 
            this.getGoodsList()
        }
    }
}
</script>

<style lang="less" scoped>
.content{
    width: 100%;
    background-color: #ccc;
    box-sizing: border-box;
    padding: 5px;
    overflow: hidden;
    .item{
        box-sizing: border-box;
        width: 48%;
        border: 1px solid #eee;
        float: left;
        margin-left: 5px;
        background-color: #fff;
        color: #000;
        // position: relative;
        margin-bottom: 5px;
        img{
            width: 100%;
        }
        .info{
            // position: absolute;
            // left: 0;
            // bottom: 0;
            width: 100%;
            height: 50px;
            background-color: rgb(229, 226, 226);
            
        }
    }
}
.getMore{
    width: 100%;
    height: 30px;
    background-color: lightgreen;
    color: #fff;
    outline: none;
}
</style>
